<template>
    <div class="page_root" data-page-name="110kv以上主变交货情况" data-page-identification="x_cki5q5nm0i">
        <a-spin :spinning="pageLoading.loading" :tip="pageLoading.tip">
            <!-- begin vid_tc9skoe31n 自定义模板_2ncn4yi7l8 -->
            <div class="body">
                <div class="title">
                    <div class="left-tip"></div>
                    <div class="left-font">110kv以上主变交货情况</div>
                </div>
                <a-table
                    :dataSource="state.dataSource"
                    :columns="state.columns"
                    bordered
                    :scroll="{ x: 'max-content' }"
                    :pagination="pagination"
                >
                    <template #bodyCell="{ column, record, text }"> </template>
                    <template v-if="column.dataIndex === 'actions'">
                        <a-button v-if="true" type="link" @click="handleEdit(record)">编辑</a-button>
                        <a-divider v-if="true" type="vertical" />

                        <a-button v-if="true" type="link" @click="handleDetail(record)">详情</a-button>
                    </template>
                </a-table>
            </div>
            <!--详情弹窗 -->
            <a-modal v-model:visible="state.detailVisible" title="详情" width="50%">
                <a-descriptions bordered :column="2">
                    <a-descriptions-item label="合同编码">Zhou Maomao</a-descriptions-item>
                    <a-descriptions-item label="合同名称">1810000000</a-descriptions-item>
                    <a-descriptions-item label="项目名称">1810000000</a-descriptions-item>
                    <a-descriptions-item label="客户名称">1810000000</a-descriptions-item>

                    <a-descriptions-item label="业务人员">Hangzhou, Zhejiang</a-descriptions-item>
                    <a-descriptions-item label="产品名称">empty</a-descriptions-item>
                    <a-descriptions-item label="产品数量"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="产品单价"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="产品总价"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="签订日期"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="计划交货时间"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="主变实际交货日期"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="附件实际交货日期"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="交货总状态"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="到账金额"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="总装日期"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="主变计划交货日期"> 1111a </a-descriptions-item>
                    <a-descriptions-item label="附件计划交货日期"> 1111a </a-descriptions-item>
                </a-descriptions>
            </a-modal>
            <!--详情弹窗 -->
            <!--编辑弹窗 -->
            <a-modal v-model:visible="state.editVisible" width="50%" title="编辑" ok-text="保存">
                <a-form ref="editForm" :model="state.editFormData" :labelCol="{ span: 7 }">
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="合同编码">
                                <a-select v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="合同名称">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="项目名称">
                                <a-input v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="客户名称">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="业务人员">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="产品名称">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="产品数量">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="产品单价">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="产品总价">
                                <a-input v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="签订日期">
                                <a-date-picker v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="计划交货日期">
                                <a-date-picker v-model:value="editFormData" disabled="true"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="主变实际交货日期">
                                <a-date-picker v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="附件实际交货日期">
                                <a-date-picker v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="交货总状态">
                                <a-select
                                    :options="[
                                        { label: '待交货', value: '待交货' },
                                        { label: '附件代交', value: '附件代交' },
                                        { label: '交货完成', value: '交货完成' }
                                    ]"
                                    v-model:value="editFormData"
                                />
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="到账金额">
                                <a-input v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="总装日期">
                                <a-date-picker v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                    <a-row justify="space-between">
                        <a-col :span="11">
                            <a-form-item name="" label="主变计划交货日期">
                                <a-date-picker v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                        <a-col :span="11">
                            <a-form-item name="" label="附件计划交货日期">
                                <a-date-picker v-model:value="editFormData"/>
                            </a-form-item>
                        </a-col>
                    </a-row>
                   
                </a-form>
            </a-modal>
            <!--编辑弹窗 -->
            <!-- end vid_tc9skoe31n 自定义模板_2ncn4yi7l8 -->
        </a-spin>
    </div>
</template>
  <script setup>
import {
    h,
    ref,
    reactive,
    toRaw,
    markRaw,
    watch,
    computed,
    onBeforeMount,
    onMounted,
    onBeforeUnmount,
    onUnmounted,
    onActivated,
    onDeactivated
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
import { get, post, put, del, request, requestWithHeaders } from '@/utils/http/Axios'
import {
    cloneDeep,
    isNullOrEmpty,
    isEmptyArr,
    isNullOrUnDef,
    localGet,
    isContained,
    isArray,
    isEmpty,
    merge,
    getDifferenceArray,
    isObject,
    traversalTreeStructure,
    checkCaseCondition,
    renderStringInTemplate,
    handleBreadcrumbJump,
    throttle
    // permission
} from '@/utils/index'
import dayjs from 'dayjs'
import { getPagePcChartsDataSourceConvert } from '@/utils/chart'
import { message, notification, Modal } from 'ant-design-vue'
import { propertyFormatByNumber, propertyFormatByPercentage, propertyFormatByDate } from '@/utils/format'
/*** PUBLISH_EXEGESIS ***
      import UserTableRecords from '@/model/UserTableRecords';
      *** PUBLISH_EXEGESIS ***/

// 获取传入的流程ID
const props = defineProps({
    processInstanceId: {
        type: String
    }
})
const immediateWatch = (source, callback) => {
    watch(source, callback, { deep: true, immediate: true })
}

/* -------------------------- 属性定义 -------------------------- */

const setTimeOutList = []
const pageLoading = reactive({
    loading: false,
    tip: undefined
})

// 处理校验
const setSubFormName = (parentInfo, name) => {
    return [parentInfo.parents, parentInfo.cycleIndex, name]
}

/* ========================== 属性定义 ========================== */

/* -------------------------- 元素数据引用 -------------------------- */

/* ========================== 元素数据引用 ========================== */

/* -------------------------- 页面数据 -------------------------- */

/* ========================== 页面数据 ========================== */

/* -------------------------- 响应 -------------------------- */

/* ========================== 响应 ========================== */

/* -------------------------- 函数 -------------------------- */

/* ========================== 函数 ========================== */

/* -------------------------- 页面参数 -------------------------- */

const pageParameter_state = reactive({
    processInstanceId: props.processInstanceId
})

/* ========================== 页面参数 ========================== */

/* -------------------------- 组件事件处理方法 -------------------------- */

// ---------------------------- 组件数据同步 ----------------------------

// ============================ 组件数据同步 ============================

/* ========================== 组件事件处理方法 ========================== */

/* -------------------------- 生命周期 -------------------------- */
onMounted(() => {})

onUnmounted(() => {
    // 销毁定时器
    setTimeOutList.forEach(({ repeat, timer }) => {
        repeat ? clearInterval(timer) : clearTimeout(timer)
    })
})

/* ========================== 生命周期 ========================== */

/* -------------------------- 数据关联处理 -------------------------- */

/* -------------------------- 表单数据同步 -------------------------- */
/* ========================== 表单数据同步 ========================== */

/* ========================== 数据关联处理 ========================== */

/* -------------------------- 不同组件自定义的处理逻辑 -------------------------- */

/* ========================== 不同组件自定义的处理逻辑 ========================== */

// ================================定制化逻辑========================================
const state = reactive({
    dataSource: [],
    columns: [
        {
            title: '合同编码',
            dataIndex: ''
        },
        {
            title: '合同类型',
            dataIndex: ''
        },
        {
            title: '合同省份',
            dataIndex: ''
        },
        {
            title: '客户名称',
            dataIndex: ''
        },
        {
            title: '合同编码',
            dataIndex: ''
        },
        {
            title: '业务人员',
            dataIndex: ''
        },
        {
            title: '合同金额',
            dataIndex: ''
        },
        {
            title: '付款方式',
            dataIndex: ''
        },
        {
            title: '付款比例',
            dataIndex: ''
        },
        {
            title: '计划开票日期',
            dataIndex: ''
        },
        {
            title: '计划回款日期',
            dataIndex: ''
        },
        {
            title: '操作',
            dataIndex: 'actions'
        }
    ],
    // 编辑表单数据
    editFormData: [],
    editVisible: true,
    detailVisible: false
})
const pageSizeChange = (current, size) => {
    pagination.value.current = current
    pagination.value.pageSize = size
    getTableData()
}
const pageChange = (page, pageSize) => {
    pagination.value.current = page
    pagination.value.pageSize = pageSize
    getTableData()
}
// 分页信息
const pagination = ref({
    current: 1,
    pageSize: 10,
    showSizeChanger: true,
    total: 0,
    pageSizeOptions: ['5', '10', '20', '30', '40', '100'],
    showTotal: total => `共 ${total} 条数据`,
    onShowSizeChange: pageSizeChange,
    onChange: pageChange
})
function getTableData() {
    post('/solution-wb/api/v1/additionalfill/cpm/list', {
        startNo: pagination.value.current,
        pageSize: pagination.value.pageSize
    }).then(({ data }) => {
        state.dataSource = data.dataList
        pagination.value.total=data.totalElements
    })
}
function handleEdit(record) {
    state.editVisible = true
}
function handleDetail(record) {
    state.detailVisible = true
}
</script>
  <style lang="less" scoped>
.page_root {
    width: 100%;
    height: 100%;
    overflow: auto;
    // background-color: rgba(214, 228, 253, 1);
}
.page_root :deep(.@{ant-prefix}-spin-nested-loading),
.page_root :deep(.@{ant-prefix}-spin-container) {
    height: 100%;
}
.table-moreBtn_down {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100px;
}

.table-moreBtn_menu :deep(.table-moreBtn_menu-item):hover {
    background: #ebf1ff;
}

/*  表格树结构样式处理，展开按钮层级增加*/
:deep(.@{ant-prefix}-table-row-expand-icon) {
    z-index: 1;
}
/*  表格树结构 由于每个表格项采用自定义组件，使用绝对定位布局，开启树结构导致显示异常，暂时使用层级定位位置 */
:deep(.@{ant-prefix}-table-row-level-1 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 15px !important;
    width: calc(100% - 15px);
}
:deep(.@{ant-prefix}-table-row-level-2 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 30px !important;
    width: calc(100% - 30px);
}
:deep(.@{ant-prefix}-table-row-level-3 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 45px !important;
    width: calc(100% - 45px);
}
:deep(.@{ant-prefix}-table-row-level-4 .@{ant-prefix}-table-cell-with-append .cell-wrapper-left) {
    left: 60px !important;
    width: calc(100% - 60px);
}

/* 穿梭框改变默认样式，为根据组件样式控制左右栏宽度。 */
:deep(.@{ant-prefix}-transfer-list) {
    height: 100%;
    width: 50%;
}
.body {
    padding: 16px 16px 0 16px;
    background-color: #fff;
    min-height: 100%;
}
/deep/.ant3-picker-date {
    width: 100%;
}
/deep/.ant3-picker {
    width: 100%;
}
.title {
    height: 35px;
    margin-bottom: 24px;
    background-color: #ebf1ff;
    position: relative;
    border-left: 4px solid rgb(56, 117, 255);
}
.left-font {
    position: absolute;
    left: 4px;
    color: #3875ff;
    font-size: 14px;
    line-height: 35px;
}
</style>
  